<style>
.ivu-card {
  border-radius: 0;
}

.tabs-forum.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
  margin: 0;
  border-radius: 0;
  background: #fff;
  border-top: 1px solid #d7dde4;
}
.tabs-forum.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
  padding-top: 4px; 
  border-top: 2px solid #1d8fe2;
  border-left: 1px solid #d7dde4;
  border-right: 1px solid #d7dde4;
}
</style>

<template>
  <div class="home">
    <second-nav></second-nav>
    <Row type="flex" justify="center" align="top"  class="mb20">
      <Col span="6">
        <Card>
          <p slot="title">建筑工程</p>
          <course-list slug="JZGC"></course-list>
        </Card>
      </Col>
      <Col span="4">
        <Card>
          <p slot="title">执业医药师</p>
          <course-list slug="ZYYYS"></course-list>
        </Card>
      </Col>
      <Col span="4">
        <Card>
          <p slot="title">财会经济</p>
          <course-list slug="CKJJ"></course-list>
        </Card>
      </Col>
      <Col span="10">
        <Card>
          <p slot="title">卫生资格</p>
          <course-list slug="wszgczj"></course-list>
        </Card>
        <Row>
          <Col span="12">
            <Card>
              <p slot="title">金融</p>
              <course-list slug="JRL"></course-list>
            </Card>
          </Col>
          <Col span="12">
            <Card>
              <p slot="title">职称类</p>
              <course-list slug="ZCXL"></course-list>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row type="flex" justify="center" align="top">
      <Col span="7">
        <p>
          <img src="../assets/img-sprint.jpg" width="100%" />
        </p>
        <Tabs type="card" value="name1" class="tabs-forum">
          <Tab-pane label="乐考网" name="name1">乐考网</Tab-pane>
          <Tab-pane label="土木者" name="name2">土木者</Tab-pane>
          <Tab-pane label="医学之家" name="name3">医学之家</Tab-pane>
          <Tab-pane label="公考社区" name="name4">公考社区</Tab-pane>
        </Tabs>
      </Col>
      <Col span="11">
        <Tabs type="card" value="ksdt">
          <Tab-pane label="最新资讯" disabled></Tab-pane>
          <Tab-pane label="考试动态" name="ksdt">
            <article-list articleCategory="6"></article-list>
          </Tab-pane>
          <Tab-pane label="最新试题" name="zxst">最新试题</Tab-pane>
          <Tab-pane label="成绩查询" name="cjcx">成绩查询</Tab-pane>
        </Tabs>
      </Col>
      <Col span="6">
        <Card>
          <p slot="title">学员登陆</p>
          <Form>
            <Form-item prop="username">
              <Input type="text">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </Form-item>
            <Form-item prop="password">
              <Input type="text">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </Form-item>
            <Form-item>
              <Button type="primary">登陆</Button>
            </Form-item>
          </Form>
          <Tabs type="card" value="bm" class="tabs-forum">
            <Tab-pane label="考试提醒" disabled></Tab-pane>
            <Tab-pane label="报名" name="bm">报名</Tab-pane>
            <Tab-pane label="考试" name="ks">考试</Tab-pane>
            <Tab-pane label="查分" name="cf">查分</Tab-pane>
          </Tabs>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="12" v-for="item in topCats" :key="item.id">
        <div class="col-heading">
          <span v-text="item.name"></span>
          <a href="#">更多</a>
        </div>
        <Tabs type="card" value="bm" class="tabs-forum">
          <Tab-pane v-for="course in item.children" :key="course.id" :label="course.name" :name="course.slug">报名</Tab-pane>
        </Tabs>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      topCats: [{
        name: '建筑工程类',
        children: [
          {name: '一级建造师'},
          {name: '二级建造师'},
          {name: '消防工程师'}
        ]
      }, {
        name: '金融类',
        children: [
          {name: '基金从业'},
          {name: '证券从业'},
          {name: '银行从业'}
        ]
      }]
    }
  },
  components: {
    SecondNav: resolve => require(['@/components/SecondNav.vue'], resolve),
    CourseList: resolve => require(['@/components/CourseList.vue'], resolve)
  }
}
</script>
